<template>
	<div>
		<RouterView class="layout-content"></RouterView>
		<van-tabbar v-model="active" route active-color="#01CB88" class="layout-footer">
			<van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item replace to="/category" icon="apps-o">分类</van-tabbar-item>
			<van-tabbar-item replace to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
			<van-tabbar-item replace to="/my" icon="user-o">我的</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script setup>
import { ref } from 'vue';
const active =ref(0)

</script>

<style lang="scss" scoped>
$height: 60px;
.layout-content {
	height: calc(100vh - $height);
	overflow: scroll;
}
.layout-footer {
	height: $height;
}
</style>
